/** */

<template>
  <div>
    <div>values: {{ this.form.getFieldsValue() }}</div>
    <a-form
      :form="form"
      :label-col="{ span: 2 }"
      :wrapper-col="{ span: 4 }"
      @submit="handleSubmit"
    >
      <a-form-item label="label of b">
        <a-input v-decorator="['b']" @change="console.log('this is a test')" />
      </a-form-item>
      <a-form-item label="input test 1">
        <InputTest1
          v-decorator="['a']"
          @change="(value) => handleControlValueChange('a', value)"
        />
      </a-form-item>
      <a-form-item label="input test 2">
        <InputTest2
          v-decorator="['b']"
          @change="(value) => handleControlValueChange('b', value)"
        />
      </a-form-item>
      <a-form-item label="label of a">
        <a-input
          v-decorator="[
            'a',
            {
              rules: [
                { required: true, message: 'Please select your gender!' },
              ],
            },
          ]"
          @change="(e) => handleControlValueChange('a', e.target.value)"
        />
      </a-form-item>
    </a-form>
    <button @click="doSubmit">do submit</button>
    <hr />
    <h1>v-model:</h1>
    <InputTest1 v-model="value3" @change="doIt_3" />
    value3: {{ value3 }}
    <br />
    <h1>no value</h1>
    <InputTest1 @change="doIt_4" />
    <button @click="updateV3">update v3</button>
    <button @click="updateV3_2">update v3 2</button>
    <h1>test 2</h1>
    <InputTest2 v-model="value3" @change="doIt_5" />
    <InputTest1 v-model="value3" @change="doIt_5" />
    <h1>test 2 no value</h1>
    <InputTest2 @change="doIt_6" />
    <InputTest1 @change="doIt_6" />
    <h1>test 2 with value</h1>
    <InputTest2 :value="value3" @change="doIt_7" />
    <InputTest1 :value="value3" @change="doIt_7" />
  </div>
</template>

<script>
import InputTest1 from '../form-test/InputTest1.vue'
import InputTest2 from '../form-test/InputTest2.vue'

export default {
  name: 'formTest3',
  components: {
    InputTest2,
    InputTest1,
  },
  props: {},
  data() {
    return {
      form: this.$form.createForm(this, {}),
      value3: 123,
    }
  },
  methods: {
    handleControlValueChange(name, value) {
      console.log('now change value - ', name, ':', value)
    },
    doIt(name, value) {
      console.log('now do it:', name, value)
    },
    updateV3() {
      console.log('now update value 3...')
      this.value3 = `new value: ${new Date()}`
    },
    updateV3_2() {
      this.value3 = undefined
    },
    doIt_3(value) {
      console.log('>>> do it 3:', value)
    },
    doIt_4(value) {
      console.log('>> new value is:', value)
    },
    doIt_5(value) {
      console.log('>>>>> now do it 5:', value)
    },
    doIt_6(value) {
      console.log('>> do it 6:', value)
    },
    doIt_7(value) {
      console.log('>> do it 7:', value)
      this.value3 = value
    },
    doLog(e) {
      console.log('do log...', e)
    },
    doOne(e) {
      console.log('do one....', e)
    },
    doTwo(e) {
      console.log('do two...', e)
    },
    doSubmit() {
      // this.form.submit()
      console.log('do submit')
      this.form.validateFields((error, values) => {
        console.log('error:', error)
        console.log('values:', values)
      })
    },
    handleSubmit(a, b, c) {
      console.log('handle submit', a, b, c)
    },
  },
  mounted() {
    this.form.setFieldsValue({ a: 11, b: 22 })
  },
}
</script>

<style></style>
